<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>Hello,{{pea}}</h1>
    </div>

    <!-- 
        总结：el 有2种方法  1.直接绑定元素id
                           2.通过Vue原型对象中的函数 $mount来绑定元素ID 
              data 有2种方法  1.直接赋值给data对象
                              2.直接通过函数返回object对象
            注意点：data不能使用箭头函数指向，否则this就会变成window对象  而非Vue实例
            data:() =>{     //第二种写法
            console.log(this);
            return {
                pea:"3244"
            }
        
     -->
</body>
<script>
    const test = new Vue({
        //el:"#root",  第一种写法
        data:{
            pea:"123"
        }
    })
    //test.$mount("#root"); //el 的第二种写法

    new Vue({
        el:"#root",
        // data:function(){ //第一种写法
        //     return {
        //         pea:"324"
        //     }
        // }
        data(){     //第二种写法
            console.log(this);
            return {
                pea:"3244"
            }
        },

        // data:()=>{
        //     console.log(this);//不能使用箭头函数的写法不然的话this指向的就是window了
        //     return {
        //         pea:"3244"
        //     }
        // }
    })


</script>
</html>